import {
  Form,
  Input,
  Select,
  InputNumber,
  Button,
  Radio,
  Checkbox,
  Modal,
  Table,
  Popconfirm,
} from 'antd';
import { connect } from 'net';

const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;

@Form.create()
export default class PlaceForm extends React.Component {
  state = {};

  okHandle = () => {
    const { form, handleAdd } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleAdd(fieldsValue);
      form.resetFields();
      this.setState({ curData: null });
    });
  };

  getTitle = () => {
    return '场地管理';
  };

  close = () => {
    const { form, handleModalVisible } = this.props;
    form.resetFields();
    this.setState({ curData: null });
    handleModalVisible();
  };

  render() {
    const { modalVisible, gameCode, form, placeList } = this.props;

    const { curData } = this.state;
    return (
      <Modal
        title={this.getTitle()}
        width={1000}
        visible={modalVisible}
        onOk={this.okHandle}
        onCancel={() => this.close()}
        okText="保存"
        cancelText="关闭"
        maskClosable={false}
      >
        <div style={{ marginBottom: 30 }}>
          <Table
            dataSource={placeList ? placeList : []}
            pagination={false}
            size="small"
            columns={[
              {
                title: '序号',
                width: 100,
                dataIndex: 'seq',
              },
              {
                title: '场地名称',
                dataIndex: 'name',
                width: 150,
              },
              {
                title: '场地描述',
                dataIndex: 'description',
              },
              {
                title: '操作',
                width: 180,
                render: (value, item) => (
                  <div>
                    <Button
                      style={{ marginRight: 5 }}
                      onClick={() => {
                        form.resetFields();
                        this.setState({ curData: item });
                      }}
                    >
                      编辑
                    </Button>
                    <Popconfirm
                      title="如果已给场地安排赛事，删除场地后果无法预料，请慎重！。"
                      onConfirm={() => this.props.deleteMethod(item.id)}
                    >
                      <Button>删除</Button>
                    </Popconfirm>
                  </div>
                ),
              },
            ]}
          />
        </div>
        <div>
          <div style={{ marginLeft: 150, marginBottom: 30 }}>
            新建场地请点新建按钮，录入数据后点确定保存。
            <Button
              type="primary"
              style={{ marginLeft: 250 }}
              onClick={() => {
                form.resetFields();
                this.setState({ curData: null });
              }}
            >
              新建
            </Button>
          </div>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="场地序号" extra='用于对场地排序'>
            {form.getFieldDecorator('seq', {
              rules: [{ required: true, message: '序号' }],
              initialValue: curData && curData.seq,
            })(<InputNumber style={{ width: '100%' }} min={1} max={32} placeholder="请输入序号" />)}
          </FormItem>
          {form.getFieldDecorator('gameCode', {
            rules: [{ required: true }],
            initialValue: gameCode && gameCode,
          })(<Input readOnly type="hidden" />)}
          {form.getFieldDecorator('id', {
            rules: [{ required: false }],
            initialValue: curData && curData.id,
          })(<Input readOnly type="hidden" />)}
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="场地名称">
            {form.getFieldDecorator('name', {
              rules: [{ required: true, message: '请输入场地名称' }],
              initialValue: curData && curData.name,
            })(<Input style={{ width: '100%' }} placeholder="请输入场地名称" />)}
          </FormItem>

          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="场地说明">
            {form.getFieldDecorator('description', {
              initialValue: curData && curData.description,
            })(<TextArea rows={5} style={{ width: '100%' }} placeholder="请输入场地名称" />)}
          </FormItem>
        </div>
      </Modal>
    );
  }
}
